<template>
  <div id="app">
    <div class="container">
      <div class="close"><span class="iconfont iconicon-test"></span></div>
      <div class="logo"><span class="iconfont iconnew"></span></div>
      <div class="inputs">
        <!-- <input placeholder="请输入手机号" class="input">
            <input placeholder="密码" class="input" type="password"> -->

        <van-form ref="form">
          <!-- 
                rules: 用于添加表单的校验规则
                    required: 表示该表单内容为必传值
                    message: 当用户输入的内容不符合校验规则的时候的一个提示文字
                    pattern：添加正则表达式校验规则
             -->
          <van-field
            v-model="user.username"
            placeholder="请输入手机号码"
            :rules="[
              {
                required: true,
                pattern: /^1[3,4,5,6,7,8,9]\d{9}$/,
                message: '手机号码不正确',
              },
            ]"
          />
          <van-field
            v-model="user.nickname"
            placeholder="请输入昵称"
            :rules="[{ required: true, message: '请输入昵称' }]"
          />
          <van-field
            v-model="user.password"
            type="password"
            placeholder="请输入密码"
            :rules="[{ required: true, message: '请输入密码' }]"
          />
          <p class="tips">
            有账号？
            <a href="#/login" class="">去登录</a>
          </p>
          <!-- 注意：click事件是vant组件库提供给我们的 -->
          <van-button type="primary" round block @click="registerFn"
            >注册</van-button
          >
        </van-form>
      </div>
    </div>
  </div>
</template>

<script>
import { register } from "../api/user.js";
export default {
  data() {
    return {
      // 如果需要传多个参数给后端，一般情况我们会把这些参数写在一个对象中
      // 因为这样调用接口的时候方便传值
      user: {
        // 变量名一般我们也不要随便取名字，我们可以看接口文档，文档中要求我们通过什么名字
        // 给后端传值，那么我们前端就取什么名字，因为这样方便调用接口的时候传值和后期维护
        username: "13543456767",
        password: "",
        nickname: "",
      },
    };
  },
  methods: {
    // 注册
    registerFn() {
      // console.log(this.user);
      this.$refs.form.validate().then(() => {
          console.log("校验通过");
        //   调用接口实现注册功能
          register(this.user).then((res) => {
            console.log(66, res);
            if (res.data.message === "注册成功") {
              this.$toast.success(res.data.message);
              // 跳转到登录页面
              this.$router.push({
                path: "/login",
              });
            } else {
              this.$toast.fail(res.data.message);
            }
          });
        })
        .catch(() => {
          console.log("校验不通过");
        });
    },
  },
};
</script>

<style lang="less" scoped >
.van-cell::after {
  border-color: #666;
}
div.inputs input {
  margin-bottom: 10px;
}
// style标签上需要添加lang属性并设置值为less，我们才能够在这个style标签内容写less语法
.container {
  padding: 20px;
}
.close {
  span {
    font-size: (27 / 360) * 100vw;
  }
}
.logo {
  display: flex;
  justify-content: center;

  span {
    display: block;
    font-size: (126 / 360) * 100vw;
    color: #d81e06;
  }
}
.inputs {
  input {
    margin-bottom: 20px;
  }
}
.tips {
  text-align: right;
  margin-bottom: 20px;
  margin-top: 5px;
  a {
    color: #3385ff;
  }
}
</style>